window.onResize = function() {};
window.ani = {
    init() {
        var canvas = document.getElementById('canvas');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
    },
    shang() {
        var canvas = document.getElementById('canvas');

        if (!canvas || !canvas.getContext) {
            return false;
        }

        /********************
         Random Number
         ********************/

        function rand(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        /********************
         Var
         ********************/

        var ctx = canvas.getContext('2d');
        var X = canvas.width = window.innerWidth;
        var Y = canvas.height = window.innerHeight;
        var shapes = [];
        var rad = Math.PI * 2 / 36;
        var style = {
            black: 'black',
            white: 'white',
            lineWidth: 4,
        };
        var colors = [
            'rgb(77, 121, 155)',
            'rgb(248, 215, 205)',
            'rgb(177, 201, 179)'
        ];

        /********************
         Animation
         ********************/

        window.requestAnimationFrame =
            window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(cb) {
                setTimeout(cb, 17);
            };

        /********************
         Shape
         ********************/

        function Shape(ctx, x, y, r) {
            this.ctx = ctx;
            this.init(x, y, r);
        }

        Shape.prototype.init = function(x, y, r) {
            this.x = x;
            this.y = y;
            this.r = 1;
            this.ri = r;
            this.c = colors[rand(0, colors.length - 1)];
            this.num = rand(0, 2);
            this.a = rand(0, 360);
            this.rad = this.a * Math.PI / 180;
            this.random = Math.random();
        };

        Shape.prototype.draw = function() {
            var ctx  = this.ctx;
            ctx.save();
            ctx.fillStyle = this.c;
            ctx.lineWidth = this.r / 100;
            ctx.strokeStyle = style.white;
            ctx.translate(this.x, this.y);
            ctx.rotate(Math.sin(Math.sin(this.rad)));
            ctx.translate(-this.x, -this.y);
            ctx.beginPath();
            for (var i = 0; i < 36; i++) {
                var x = Math.cos(rad * i) * this.r + this.x;
                var y = Math.sin(rad * i) * this.r + this.y;
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            for (var i = 0; i < 36; i++) {
                var x = Math.cos(rad * i) * this.r * 1.01 + this.x;
                var y = Math.sin(rad * i) * this.r * 1.01 + this.y;
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(x, y);
                ctx.stroke();
            }
            ctx.strokeStyle = 'rgb(252, 250, 238)';
            // pattern
            switch (this.num) {
                case 0:
                    this.drawCircle();
                    break;
                case 1:
                    this.doubleCircle();
                    break;
                default:
                    break;
            }
            ctx.restore();
        };

        Shape.prototype.drawCircle = function() {
            ctx.lineWidth = this.r / 5;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r / 2, 0, Math.PI * 2, false);
            ctx.stroke();
        };

        Shape.prototype.doubleCircle = function() {
            for (var i = 2; i < 4; i++) {
                ctx.lineWidth = this.r / i / 5;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r / i, 0, Math.PI * 2, false);
                ctx.stroke();
            }
        };

        Shape.prototype.updateParams = function(i) {
            if (i % 2 === 0) this.a += this.random;
            if (i % 2 !== 0) this.a -= this.random;
            if (this.r < this.ri) this.r += 0.5;
            this.rad = this.a * Math.PI / 180;
        };

        Shape.prototype.render = function(i) {
            this.updateParams(i);
            this.draw();
        };

        // Add Shape
        function addShape() {
            var overlap = false;
            var setX = rand(0, X);
            var setY = rand(0, Y);
            var setR;
            Math.random() < 0.3 ? setR = rand(50, 70) : setR = rand(100, 200);
            for (var i = 0; i < shapes.length; i++) {
                var x = Math.abs(setX - shapes[i].x);
                var y = Math.abs(setY - shapes[i].y);
                var d = x * x + y * y;
                var dist = Math.floor(Math.sqrt(d));
                if (dist < setR + shapes[i].ri / 2) {
                    overlap = true;
                    break;
                }
            }
            if (overlap === true) {
                return;
            }
            var s = new Shape(ctx, setX, setY, setR);
            shapes.push(s);
        }

        for (var i = 0; i < 1; i++) {
            var s = new Shape(ctx, rand(0, X), rand(0, Y), rand(50, 200));
            shapes.push(s);
        }

        /********************
         Confetti
         ********************/

        var confettiNum = 200;
        var confettis = [];

        function Confetti(ctx, x, y) {
            this.ctx = ctx;
            this.init(x, y);
        }

        Confetti.prototype.init = function(x, y) {
            this.x = x;
            this.y = y;
            this.r = rand(5, 15);
            this.c = colors[rand(0, colors.length - 1)];
            this.a = rand(0, 360);
            this.rad = this.a * Math.PI / 180;
            this.v = {
                x: rand(-1, 1) * Math.random(),
                y: Math.random() + Math.random()
            };
            this.random = 1;
        };

        Confetti.prototype.draw = function() {
            var ctx = this.ctx;
            ctx.save();
            ctx.fillStyle = this.c;
            ctx.translate(this.x + this.r / 2, this.y + this.r / 2);
            ctx.rotate(this.rad);
            ctx.scale(Math.cos(this.rad * 7), Math.sin(this.rad * 3));
            ctx.translate(-this.x - this.r / 2, -this.y - this.r / 2);
            ctx.fillRect(this.x, this.y, this.r, this.r);
            ctx.restore();
        };

        Confetti.prototype.updateParams = function(i) {
            if (i % 2 === 0) this.a += this.random;
            if (i % 2 !== 0) this.a -= this.random;
            this.rad = this.a * Math.PI / 180;
        };

        Confetti.prototype.updatePosition = function() {
            this.x += this.v.x;
            this.y += this.v.y;
        };

        Confetti.prototype.wrapPosition = function() {
            if (this.y > Y + this.r) {
                this.y = 0 - this.r;
                this.x = rand(0, X);
            }
        };

        Confetti.prototype.render = function(i) {
            this.updateParams(i);
            this.updatePosition();
            this.wrapPosition();
            this.draw();
        };

        for (var i = 0; i < confettiNum; i++) {
            var c = new Confetti(ctx, rand(0, X), rand(-Y / 2, 0));
            confettis.push(c);
        }

        /********************
         Render
         ********************/

        function render() {
            ctx.clearRect(0, 0, X, Y);
            for (var i = 0; i < shapes.length; i++) {
                shapes[i].render(i);
            }
            for (var i = 0; i < confettis.length; i++) {
                confettis[i].render(i);
            }
            addShape();
            requestAnimationFrame(render);
        }

        render();

        /********************
         Event
         ********************/

        window.onResize = function onResize() {
            X = canvas.width = window.innerWidth;
            Y = canvas.height = window.innerHeight;
        }

    },
    paopao() {
        //测试 路径属性
        var o = document.getElementsByTagName("body")[0];
        var num = 200;
        var w = window.innerWidth;
        var h = o.offsetHeight;
        var max = 100;
        var _x = 0;
        var _y = 0;
        var _z = 150;
        var dtr = function(d) {
            return d * Math.PI / 180;
        };

        var rnd = function() {
            return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
        };
        var dist = function(p1, p2, p3) {
            return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
        };

        var cam = {
            obj: {
                x: _x,
                y: _y,
                z: _z
            },
            dest: {
                x: 0,
                y: 0,
                z: 1
            },
            dist: {
                x: 0,
                y: 0,
                z: 200
            },
            ang: {
                cplane: 0,
                splane: 0,
                ctheta: 0,
                stheta: 0
            },
            zoom: 1,
            disp: {
                x: w / 2,
                y: h / 2,
                z: 0
            },
            upd: function() {
                cam.dist.x = cam.dest.x - cam.obj.x;
                cam.dist.y = cam.dest.y - cam.obj.y;
                cam.dist.z = cam.dest.z - cam.obj.z;
                cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
                cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
            }
        };

        var trans = {
            parts: {
                sz: function(p, sz) {
                    return {
                        x: p.x * sz.x,
                        y: p.y * sz.y,
                        z: p.z * sz.z
                    };
                },
                rot: {
                    x: function(p, rot) {
                        return {
                            x: p.x,
                            y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
                            z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
                        };
                    },
                    y: function(p, rot) {
                        return {
                            x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
                            y: p.y,
                            z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
                        };
                    },
                    z: function(p, rot) {
                        return {
                            x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
                            y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
                            z: p.z
                        };
                    }
                },
                pos: function(p, pos) {
                    return {
                        x: p.x + pos.x,
                        y: p.y + pos.y,
                        z: p.z + pos.z
                    };
                }
            },
            pov: {
                plane: function(p) {
                    return {
                        x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
                        y: p.y,
                        z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
                    };
                },
                theta: function(p) {
                    return {
                        x: p.x,
                        y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
                        z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
                    };
                },
                set: function(p) {
                    return {
                        x: p.x - cam.obj.x,
                        y: p.y - cam.obj.y,
                        z: p.z - cam.obj.z
                    };
                }
            },
            persp: function(p) {
                return {
                    x: p.x * cam.dist.z / p.z * cam.zoom,
                    y: p.y * cam.dist.z / p.z * cam.zoom,
                    z: p.z * cam.zoom,
                    p: cam.dist.z / p.z
                };
            },
            disp: function(p, disp) {
                return {
                    x: p.x + disp.x,
                    y: -p.y + disp.y,
                    z: p.z + disp.z,
                    p: p.p
                };
            },
            steps: function(_obj_, sz, rot, pos, disp) {
                var _args = trans.parts.sz(_obj_, sz);
                _args = trans.parts.rot.x(_args, rot);
                _args = trans.parts.rot.y(_args, rot);
                _args = trans.parts.rot.z(_args, rot);
                _args = trans.parts.pos(_args, pos);
                _args = trans.pov.plane(_args);
                _args = trans.pov.theta(_args);
                _args = trans.pov.set(_args);
                _args = trans.persp(_args);
                _args = trans.disp(_args, disp);
                return _args;
            }
        };

        (function() {
            "use strict";
            var threeD = function(param) {
                this.transIn = {};
                this.transOut = {};
                this.transIn.vtx = (param.vtx);
                this.transIn.sz = (param.sz);
                this.transIn.rot = (param.rot);
                this.transIn.pos = (param.pos);
            };

            threeD.prototype.vupd = function() {
                this.transOut = trans.steps(

                    this.transIn.vtx,
                    this.transIn.sz,
                    this.transIn.rot,
                    this.transIn.pos,
                    cam.disp
                );
            };

            var Build = function() {
                this.vel = 0.04;
                this.lim = 360;
                this.diff = 200;
                this.initPos = 100;
                this.toX = _x;
                this.toY = _y;
                this.go();
            };

            Build.prototype.go = function() {
                this.canvas = document.getElementById("canvas");
                // this.canvas.width = window.innerWidth;
                // this.canvas.height = o.offsetHeight;
                this.$ = canvas.getContext("2d");
                this.$.globalCompositeOperation = 'source-over';
                this.varr = [];
                this.dist = [];
                this.calc = [];

                for (var i = 0, len = num; i < len; i++) {
                    this.add();
                }

                this.rotObj = {
                    x: 0,
                    y: 0,
                    z: 0
                };
                this.objSz = {
                    x: w / 5,
                    y: h / 5,
                    z: w / 5
                };
            };

            Build.prototype.add = function() {
                this.varr.push(new threeD({
                    vtx: {
                        x: rnd(),
                        y: rnd(),
                        z: rnd()
                    },
                    sz: {
                        x: 0,
                        y: 0,
                        z: 0
                    },
                    rot: {
                        x: 20,
                        y: -20,
                        z: 0
                    },
                    pos: {
                        x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                        y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                        z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
                    }
                }));
                this.calc.push({
                    x: 360 * Math.random(),
                    y: 360 * Math.random(),
                    z: 360 * Math.random()
                });
            };

            Build.prototype.upd = function() {
                cam.obj.x += (this.toX - cam.obj.x) * 0.05;
                cam.obj.y += (this.toY - cam.obj.y) * 0.05;
            };

            Build.prototype.draw = function() {
                this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
                cam.upd();
                this.rotObj.x += 0.1;
                this.rotObj.y += 0.1;
                this.rotObj.z += 0.1;

                for (var i = 0; i < this.varr.length; i++) {
                    for (var val in this.calc[i]) {
                        if (this.calc[i].hasOwnProperty(val)) {
                            this.calc[i][val] += this.vel;
                            if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
                        }
                    }

                    this.varr[i].transIn.pos = {
                        x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
                        y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
                        z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
                    };
                    this.varr[i].transIn.rot = this.rotObj;
                    this.varr[i].transIn.sz = this.objSz;
                    this.varr[i].vupd();
                    if (this.varr[i].transOut.p < 0) continue;
                    var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
                    this.$.globalCompositeOperation = 'lighter';
                    g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
                    g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
                    g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
                    this.$.fillStyle = g;
                    this.$.beginPath();
                    this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
                    this.$.fill();
                    this.$.closePath();
                }
            };
            Build.prototype.anim = function() {
                window.requestAnimationFrame = (function() {
                    return window.requestAnimationFrame ||
                        function(callback, element) {
                            window.setTimeout(callback, 1000 / 60);
                        };
                })();
                var anim = function() {
                    this.upd();
                    this.draw();
                    window.requestAnimationFrame(anim);
                }.bind(this);
                window.requestAnimationFrame(anim);
            };

            Build.prototype.run = function() {
                this.anim();

                setInterval(() => {
                    this.toX = ((window.innerWidth * (Math.random() * 0.1 + 0.9)) / 2 - this.canvas.width / 2) * -0.8;
                    this.toY = (window.innerHeight * (Math.random() * 0.1 + 0.9) - this.canvas.height / 2) * 0.8;
                },3000);
                // window.addEventListener('mousemove', function(e) {
                //     this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
                //     this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
                // }.bind(this));
                // window.addEventListener('touchmove', function(e) {
                //     e.preventDefault();
                //     this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
                //     this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
                // }.bind(this));
                // window.addEventListener('mousedown', function(e) {
                //     for (var i = 0; i < 100; i++) {
                //         this.add();
                //     }
                // }.bind(this));
                // window.addEventListener('touchstart', function(e) {
                //     e.preventDefault();
                //     for (var i = 0; i < 100; i++) {
                //         this.add();
                //     }
                // }.bind(this));
            };
            var app = new Build();
            app.run();
        })();
        window.onResize = function () {
            // canvas.width = w = window.innerWidth;
            // canvas.height = h = window.innerHeight;
        };
    },
    qi() {
        (function() {
            let Bubble = (function() {
                class Bubble {
                    constructor(x, y, r, createdAt) {
                        this.x = x;
                        this.y = y;
                        this.r = r;
                        this.createdAt = createdAt;
                    }

                    velocity() {
                        return this.r / 20 * Bubble.MAX_V;
                    }

                    grow(now) {
                        if (!this.rising && this.r <= Bubble.MAX_R) {
                            return this.r += Bubble.GROWTH_RATE * (now - this.createdAt);
                        }
                    }

                    move(now) {
                        if (this.rising) {
                            return this.y -= (now - this.startedRisingAt) * this.velocity();
                        }
                    }

                    rise() {
                        if (!this.rising && this.r > 2) {
                            this.rising = Math.random() < 0.15 * (this.r / Bubble.MAX_R);
                            if (this.rising) {
                                return this.startedRisingAt = new Date().getTime();
                            }
                        }
                    }

                };

                Bubble.MAX_R = 20;

                Bubble.MAX_V = 0.02;

                Bubble.GROWTH_RATE = 0.00005;

                return Bubble;

            }).call(this);

            let RisingBubbles = (function() {
                var rand, randInt;

                class RisingBubbles {
                    constructor(id, maxBubbles) {
                        var elem, i, j, ref;
                        this.maxBubbles = maxBubbles;
                        this.canvas = document.getElementById(id);
                        elem = document.getElementById(id);
                        if (!elem) {
                            return;
                        }
                        elem.style.backgroundColor = '#b99d93';
                        elem.onClick = (() => {
                            var b, j, len, ref, results, ts;
                            ts = new Date().getTime();
                            ref = this.bubbles;
                            results = [];
                            for (j = 0, len = ref.length; j < len; j++) {
                                b = ref[j];
                                if (!b.rising) {
                                    b.rising = true;
                                    results.push(b.startedRisingAt = ts);
                                } else {
                                    results.push(void 0);
                                }
                            }
                            return results;
                        });
                        this.canvas.width = this.canvas.clientWidth;
                        this.canvas.height = this.canvas.clientHeight;
                        this.ctx = this.canvas.getContext('2d');
                        this.ctx.fillStyle = '#FFFFFF';
                        this.bubbles = [];
                        this.lastFrame = new Date().getTime();
                        for (i = j = 1, ref = randInt(0, this.maxBubbles); 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
                            this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), rand(0, Bubble.MAX_R), new Date().getTime()));
                        }
                    }

                    draw() {
                        return this.run(new Date().getTime());
                    }

                    run(now) {
                        var bubble, j, len, ref;
                        this.update(now);
                        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                        ref = this.bubbles;
                        for (j = 0, len = ref.length; j < len; j++) {
                            bubble = ref[j];
                            this.ctx.moveTo(bubble.x, bubble.y);
                            this.ctx.beginPath();
                            this.ctx.arc(bubble.x, bubble.y, bubble.r, 0, 2 * Math.PI);
                            this.ctx.fill();
                        }
                        return requestAnimationFrame(() => {
                            return this.run(new Date().getTime());
                        });
                    }

                    update(now) {
                        var b, i, j, k, len, ref, ref1, results;
                        ref = this.bubbles;
                        for (j = 0, len = ref.length; j < len; j++) {
                            b = ref[j];
                            b.grow(now);
                            b.rise();
                            b.move(now);
                        }
                        this.bubbles = (function() {
                            var k, len1, ref1, results;
                            ref1 = this.bubbles;
                            results = [];
                            for (k = 0, len1 = ref1.length; k < len1; k++) {
                                b = ref1[k];
                                if (b.y + b.r >= 0) {
                                    results.push(b);
                                }
                            }
                            return results;
                        }).call(this);
                        if (this.maxBubbles - this.bubbles.length > 0) {
                            results = [];
                            for (i = k = 1, ref1 = randInt(0, this.maxBubbles - this.bubbles.length); 1 <= ref1 ? k <= ref1 : k >= ref1; i = 1 <= ref1 ? ++k : --k) {
                                results.push(this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), 1, new Date().getTime())));
                            }
                            return results;
                        }
                    }

                };

                randInt = function(min, max) {
                    return Math.floor(Math.random() * (max - min) + min);
                };

                rand = function(min, max) {
                    return Math.floor(Math.random() * (max - min) + min);
                };

                return RisingBubbles;

            }).call(this);

            var fizz;
            fizz = new RisingBubbles('canvas', 500);
            return fizz.draw();

        }).call(this);
    }
};
/*
* File Name / wagasa.js
* Created Date / Aug 11, 2020
* Aurhor / Toshiya Marukubo
* Twitter / https://twitter.com/toshiyamarukubo
*/